import { Input, InputNumber } from 'antd';
import React, { Component } from 'react';
import styles from './toolbar.less';

import checkSImg from '@/assets/img/check_select.png';
import checkNImg from '@/assets/img/check_normal.png';
import PropTypes from 'prop-types';

export class TRCheck extends Component {
  render() {
    const { checked, onChange, children } = this.props;
    return (
      <div className={styles.rowStyle}>
        <img
          onClick={() => {
            onChange && onChange();
          }}
          className={styles.checkStyle}
          src={checked ? checkSImg : checkNImg}
        />
        {children ? <div style={{ marginLeft: 5 }}>{children}</div> : null}
      </div>
    );
  }
}
TRCheck.propTypes = {
  checked: PropTypes.bool,
  onChange: PropTypes.func,
  children: PropTypes.node,
};

export class TRMonitorMinus extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }
  _onBlur() {
    const { onBlur } = this.props;
    onBlur && onBlur(this.state.value.trim());
    this.setState({
      value: '',
    });
  }
  onChange(event) {
    if (event && event.target) {
      let hasF = false;
      let str = event.target.value || '';
      if (str[0] === '-') {
        hasF = true;
      }
      if (Number(event.target.value) < -999999999 || Number(event.target.value) > 999999999) {
        str = this.state.value;
      }
      if (this.props.precision === (6 || '6')) {
        this.setState({
          isFocus: true,
          value: (hasF ? '-' : '') + str.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1'),
        });
      } else {
        this.setState({
          isFocus: true,
          value: (hasF ? '-' : '') + str.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1'),
        });
      }
    }
  }
  render() {
    return (
      <div className={styles.inputbox}>
        <span style={{ marginLeft: 24, marginRight: 16 }}>调节数值</span>
        <Input
          ref={(e) => (this._input = e)}
          value={this.state.value}
          onPressEnter={() => {
            this._input && this._input.blur();
          }}
          onBlur={this._onBlur.bind(this)}
          onChange={this.onChange.bind(this)}
        />
      </div>
    );
  }
}
export class TRRatioMinus extends Component {
  __lastValue__ = '';
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }
  _onBlur() {
    const { onBlur } = this.props;
    let _value = String(this.state.value).replace(/[^(\-?)\d+]/gi, '');
    onBlur && onBlur(_value);
    this.setState({
      value: '',
    });
  }
  onChange(event) {
    this.setState({
      value: event,
    });
  }
  _onFormatter(value) {
    let hasF = false;
    let str = String(value) || '';
    if (str[0] === '-') {
      hasF = true;
    }
    const temp = (hasF ? '-' : '') + str.toString().replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
    if (temp < -99999999 || temp > 99999999) {
      return this.__lastValue__;
    }
    this.__lastValue__ = temp;
    return `${temp}${temp.length > 0 ? '%' : ''}`;
  }
  render() {
    const { isFormatter = true, stylesData = {} } = this.props;
    let obj = {};
    if (isFormatter) {
      obj.formatter = this._onFormatter.bind(this);
    }
    return (
      <div className={styles.inputbox}>
        <span style={{ marginLeft: 24, marginRight: 16, ...stylesData }}>调节比例</span>
        <InputNumber
          precision={2}
          min={-999999999}
          max={999999999}
          value={this.state.value}
          onChange={this.onChange.bind(this)}
          onBlur={this._onBlur.bind(this)}
          {...obj}
          parser={(value) => value.replace('%', '')}
        />
      </div>
    );
  }
}

export class TRMonitorPlus extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }
  _onBlur() {
    const { onBlur } = this.props;
    onBlur && onBlur(this.state.value.trim());
    this.setState({
      value: '',
    });
  }
  onChange(event) {
    if (event && event.target) {
      let str = event.target.value || '';
      if (Number(event.target.value) < 0 || Number(event.target.value) > 999999999) {
        str = this.state.value;
      }
      if (this.props.precision === (6 || '6')) {
        this.setState({
          isFocus: true,
          value: str.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1'),
        });
      } else {
        this.setState({
          isFocus: true,
          value: str.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1'),
        });
      }
    }
  }
  render() {
    const { isAllChecked = false } = this.props;
    return (
      <div className={styles.inputbox}>
        <span
          style={
            isAllChecked ? { marginLeft: 24, marginRight: 16 } : { marginLeft: 0, marginRight: 16 }
          }
        >
          调节数值
        </span>
        <Input
          ref={(e) => (this._input = e)}
          value={this.state.value}
          onPressEnter={() => {
            this._input && this._input.blur();
          }}
          onBlur={this._onBlur.bind(this)}
          onChange={this.onChange.bind(this)}
        />
      </div>
    );
  }
}

export class TRRatioPlus extends Component {
  __lastValue__ = '';
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }
  _onBlur() {
    const { onBlur } = this.props;
    let _value = String(this.state.value).replace(/[^(\-?)\d+]/gi, '');
    onBlur && onBlur(_value);
    this.setState({
      value: '',
    });
  }
  onChange(event) {
    this.setState({
      value: event,
    });
  }
  _onFormatter(value) {
    let str = value || '';
    const temp = str.toString().replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
    if (temp < 0 || temp > 999999999) {
      return this.__lastValue__;
    }
    this.__lastValue__ = temp;
    return `${temp}${temp.length > 0 ? '%' : ''}`;
  }
  render() {
    return (
      <div className={styles.inputbox}>
        <span style={{ marginLeft: 24, marginRight: 16 }}>调节比例</span>
        <InputNumber
          precision={2}
          min={0}
          max={999999999}
          style={{ color: '#888e95' }}
          value={this.state.value}
          onChange={this.onChange.bind(this)}
          onBlur={this._onBlur.bind(this)}
          formatter={this._onFormatter.bind(this)}
          parser={(value) => value.replace('%', '')}
        />
      </div>
    );
  }
}
TRMonitorPlus.propTypes = {
  onBlur: PropTypes.func,
  precision: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  isAllChecked: PropTypes.bool,
};
TRRatioPlus.propTypes = {
  onBlur: PropTypes.func,
};
TRMonitorMinus.propTypes = {
  onBlur: PropTypes.func,
  stylesData: PropTypes.object,
  precision: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
TRRatioMinus.propTypes = {
  onBlur: PropTypes.func,
  stylesData: PropTypes.object,
  isFormatter: PropTypes.bool,
};
